<sa-widget [editbutton]="false" [deletebutton]="false">
  <!-- widget options:
  usage: <sa-widget [editbutton]="false">

  [colorbutton]="false"
  [editbutton]="false"
  [togglebutton]="false"
  [deletebutton]="false"
  [fullscreenbutton]="false"
  [custombutton]="false"
  [collapsed]="true"
  [sortable]="false"

  -->
  <header>
    <h2>Fuel Wizard </h2>

  </header>

  <!-- widget div-->
  <div>

    <!-- widget content -->
    <div class="widget-body fuelux">
      <fuel-ux-wizard (complete)="onWizardComplete($event)">
        <div class="wizard">
          <div class="steps-container">
            <ul class="steps">
              <li data-step="1" class="active">
                <span class="badge badge-info">1</span>Step 1<span class="chevron"></span>
              </li>
              <li data-step="2">
                <span class="badge">2</span>Step 2<span class="chevron"></span>
              </li>
              <li data-step="3">
                <span class="badge">3</span>Step 3<span class="chevron"></span>
              </li>
              <li data-step="4">
                <span class="badge">4</span>Step 4<span class="chevron"></span>
              </li>
              <li data-step="5">
                <span class="badge">5</span>Step 5<span class="chevron"></span>
              </li>
            </ul>
          </div>
          <div class="actions">
            <button type="button" class="btn btn-sm btn-primary btn-prev">
              <i class="fa fa-arrow-left"></i>Prev
            </button>
            <button type="button" class="btn btn-sm btn-success btn-next" data-last="Finish">
              Next<i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        <div class="step-content">
          <form class="form-horizontal">

            <div class="step-pane active" data-step="1">
              <h3><strong>Step 1 </strong> - Validation states</h3>

              <!-- wizard form starts here -->
              <fieldset>

                <div class="form-group has-warning">
                  <label class="col-md-2 control-label">Input warning</label>

                  <div class="col-md-10">
                    <div class="input-group">
                      <input class="form-control" type="text">
                      <span class="input-group-addon"><i class="fa fa-warning"></i></span>
                    </div>
                    <span class="help-block">Something may have gone wrong</span>
                  </div>

                </div>

                <div class="form-group has-error">
                  <label class="col-md-2 control-label">Input error</label>

                  <div class="col-md-10">
                    <div class="input-group">
                      <input class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-remove-circle"></i></span>
                    </div>
                    <span class="help-block"><i class="fa fa-warning"></i> Please correct the error</span>
                  </div>
                </div>

                <div class="form-group has-success">
                  <label class="col-md-2 control-label">Input success</label>

                  <div class="col-md-10">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
                      <input class="form-control" type="text">
                      <span class="input-group-addon"><i class="fa fa-check"></i></span>
                    </div>
                    <span class="help-block">Something may have gone wrong</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="control-label col-md-2">Input icon success</label>

                  <div class="col-md-10">
                    <div class="row">
                      <div class="col-sm-12">

                        <div class="input-icon-left">
                          <i class="fa txt-color-green fa-check"></i>
                          <input class="form-control" placeholder="Left Icon" type="text">
                        </div>

                      </div>
                    </div>
                  </div>
                </div>

              </fieldset>

            </div>

            <div class="step-pane" data-step="2">
              <h3><strong>Step 2 </strong> - Alerts</h3>

              <alert type="warning" dismissible="true">
                <i class="fa-fw fa fa-warning"></i>
                <strong>Warning</strong> Your monthly traffic is reaching limit.
              </alert>

              <alert type="success" dismissible="true">
                <i class="fa-fw fa fa-check"></i>
                <strong>Success</strong> The page has been added.
              </alert>

              <alert type="info" dismissible="true">
                <i class="fa-fw fa fa-info"></i>
                <strong>Info!</strong> You have 198 unread messages.
              </alert>

              <alert type="danger" dismissible="true">
                <i class="fa-fw fa fa-times"></i>
                <strong>Error!</strong> The daily cronjob has failed.
              </alert>

            </div>

            <div class="step-pane" data-step="3">
              <h3><strong>Step 3 </strong> - Wizard continued</h3>
              <br>
              <br>

              <h1 class="text-center text-primary"> This will be your Step 3 </h1>
              <br>
              <br>
              <br>
              <br>
            </div>

            <div class="step-pane" data-step="4">
              <h3><strong>Step 4 </strong> - Wizard continued...</h3>
              <br>
              <br>

              <h1 class="text-center text-danger"> This will be your Step 4 </h1>
              <br>
              <br>
              <br>
              <br>
            </div>

            <div class="step-pane" data-step="5">
              <h3><strong>Step 5 </strong> - Finished!</h3>
              <br>
              <br>

              <h1 class="text-center text-success"><i class="fa fa-check"></i> Congratulations!
                <br>
                <small>Click finish to end wizard</small>
              </h1>
              <br>
              <br>
              <br>
              <br>
            </div>

          </form>
        </div>
      </fuel-ux-wizard>
    </div>
    <!-- end widget content -->

  </div>
  <!-- end widget div -->

</sa-widget>
